iT邦幫忙

2022 iThome 鐵人賽

DAY 30
1
自我挑戰組

30天JavaScript自學挑戰系列 第 30

Day 30 "this" 關鍵字

  • 分享至 

  • xImage
  •  

終於來到挑戰的最後一天,今天要來談談前面提過的this關鍵字。

This關鍵字是JavaScript中一個非常重要的概念,this關鍵字或稱為this變數,是為每個EC所創建的特殊變數,因此this也是為了每個函數所創建的。

之前提到,this關鍵字是EC的三個組成部分之一,一般來說,假如一個函數使用了this關鍵字,this就會去取用該函數的所有者的值,換句話說,this關鍵字指向函數的所有者,而且它並不是靜態的,這取決於函數被呼叫的情況,而當函數被呼叫時,它的值才會被指派。

現在來分析一下呼叫函數的常見方式及使用在這些函數中的this關鍵字:

1.Method:也就是附加在物件上的函數,當物件呼叫函數時,this會指向該物件,舉例來說。

const cat = {
  name: "MeowMeow",
  age: 3,
  soundsAngry: "Hiss",
  soundsRelaxed: "Purr",
  angry: function() {
    return this.soundsAngry; 
  }
};

cat.angry(); 
// Hiss

2.單純呼叫函數:不當作方法來使用,也不依附在物件後,在嚴格模式之下this等於undefined,非嚴格模式時則指向global object,這可能會導致一些問題,所以應該盡量使用嚴格模式。

3.Arrow function:這並不是呼叫函數的方式,只是我們要考慮的一種情況,arrow function的特性是沒有自己的this關鍵字,而是取用父級函數(parent function)的this關鍵字,又叫做lexical this keyword,因為這是從外部的詞範疇(lexical scope)得到的this關鍵字。

4.如果函數作為事件監聽器(eventListener)被呼叫,那麼this關鍵字會指向附加了這個handler function的DOM元素。

值得一提的是,this關鍵字永遠不會指向使用它的函數以及該函數的變數環境。


上一篇
Day 29 Scope Chain
系列文
30天JavaScript自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言